<template>
  <div class='comment'>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      error-text="请求失败，点击重新加载"
    >
      <div class="short-comment">
      <div class="short-comment-title">
        <h3>
          短评
          <van-icon name="question-o" />
        </h3>
      </div>
      <div class="short-comment-content">
        <div class="card">
          <van-card v-for="(item,index) in comments" :key="index">
            <template #title>
              <div>
                <van-image radius="50%" :src="item.author.avatar" fit="contain" />
                  <div class="userInfo">
                    <span class="userName">{{ item.author.name }}</span>
                    <span class="userBe">
                      <van-rate
                        v-model="item.rating.value"
                        :size="12"
                        color="#f99900"
                        void-icon="star"
                        void-color="#eee"
                      />
                      {{ item.created_at.split(' ')[0] }}
                    </span>
                  </div>
              </div>
              <van-icon name="ellipsis" style="font-size: 24px"/>
            </template>
            <template #price>
              <div style="text-indent: 24px; color: #fff;" >
                {{ item.content }}
              </div>
            </template>
            <template #footer>
              <div class="dot">
                <van-icon name="thumb-circle-o" style="font-size: 18px" />
                {{ item.useful_count }}
              </div>
              <van-divider
                :style="{
                  color: '#ccc',
                  borderColor: '#ccc',
                  padding: '0 16px',
                  height: '10px',
                }"
              />
            </template>
          </van-card>
        </div>
      </div>
    </div>
    </van-list>
  </div>
</template>

<script>
import { getComment } from '@/api/home'
export default {
  name: 'comment',
  data () {
    return {
      id: this.$route.params.id,
      info: {},
      start: 0, // 查询短评开始处
      count: 20, // 长度限制
      comments: [], // 评论数组
      loading: false,
      finished: false,
    }
  },
  methods: {
    onLoad () {
      getComment(this.id, this.start, this.count)
        .then(res => {
          // console.log('LOAD...', res)
          // console.log(this.id, this.start, this.count)
          this.info = res
          // 评论数组
          this.comments = [...this.comments, ...res.comments]
          // console.log(this.comments)
          // 设置下次开始位置
          this.start += res.next_start
          this.loading = false
          if (this.comments.length >= 100) {
            this.finished = true
          } else {
            this.finished = false
          }
        })
        .catch(console.log)
    },
  },
  computed: {},
  components: {},
  created () {

  },
}
</script>

<style lang='less' scoped>
.comment {
  .short-comment {
    background-color: #403227;
    color: #ffffff;
    border-radius: 15px;
    margin: 5px 10px;
    padding: 5px 10px;
    .short-comment-title {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      margin: 10px 0;
    }
    .short-comment-content {
      .van-card {
        color: #ffffff;
        background-color: #403227;
        .van-card__content > div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
        }
        .van-card__content > div > div {
          display: flex;
          .userInfo {
            display: flex;
            flex-flow: column;
            justify-content: space-around;
            margin-left: 10px;
            .userBe {
              display: flex;
              flex-flow: column;
            }
          }
        }
        .van-card__bottom {
          margin-top: 10px;
        }
        .van-card__footer {
          display: flex;
          flex-flow: column;
          justify-content: flex-end;
          * {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 5px;
          }
        }
        .van-card__price {
          flex-flow: column;
        }
      }
    }
  }
}
</style>
